<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Hello world</title>  
    <script src="https://d3js.org/d3.v6.min.js"></script>  
    <style>  
        .axis path, .axis line {  
            fill: none;  
            shape-rendering: crispEdges;  
        }  
        .axis text {  
            font-family: sans-serif;  
            font-size: 12px;  
        }  
    </style>  
</head>  
<body>  
    <p>Hello world 1</p>  
    <p>Hello world 2</p>  
    <script>  
        // 画图大小  
        var width = 400;  
        var height = 400;  
        // 添加svg画布  
        var svg = d3.select("body")  
            .append("svg")  
            .attr("width", width)  
            .attr("height", height);  

        var padding = {left: 30, right: 30, top: 20, bottom: 20};  

        // 定义一个数组  
        var dataset = [10, 20, 30, 40, 33, 24, 12, 5];  

        // x轴比例尺  
        var xScale = d3.scaleBand()  
            .domain(d3.range(dataset.length))  
            .range([0, width - padding.left - padding.right])  
            .padding(0.1); // 设置间隔  

        // y轴比例尺  
        var yScale = d3.scaleLinear()  
            .domain([0, d3.max(dataset)])  
            .range([height - padding.bottom - padding.top, 0]);  

        // 定义x轴和y轴  
        var xAxis = d3.axisBottom(xScale).tickFormat(function(d) { return d + 1; }); // 加1是为了从1开始  
        var yAxis = d3.axisLeft(yScale);  

        // 添加矩形元素  
        var rects = svg.selectAll(".MyRect")  
            .data(dataset)  
            .enter()  
            .append("rect")  
            .attr("class", "MyRect")  
            .attr("transform", "translate(" + padding.left + "," + padding.top + ")")  
            .attr("x", (d, i) => xScale(i))  
            .attr("y", d => yScale(d))  
            .attr("width", xScale.bandwidth())  
            .attr("height", d => height - padding.top - padding.bottom - yScale(d))  
            .attr("fill", "steelblue"); // 设置矩形颜色  

        // 添加文字元素  
        svg.selectAll(".MyText")  
            .data(dataset)  
            .enter()  
            .append("text")  
            .attr("class", "MyText")  
            .attr("transform", "translate(" + padding.left + "," + padding.top + ")")  
            .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2)  
            .attr("y", d => yScale(d) - 5) // 将文字放在矩形顶部  
            .attr("text-anchor", "middle")  
            .text(d => d);  

        // 添加x轴  
        svg.append("g")  
            .attr("class", "axis")  
            .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")  
            .call(xAxis);   

        // 添加y轴  
        svg.append("g")  
            .attr("class", "axis")  
            .attr("transform", "translate(" + padding.left + "," + padding.top + ")")  
            .call(yAxis);  
    </script>  
</body>  
</html>